<!DOCTYPE html>
<html lang="zh_CN">
<head>
    <meta charset="UTF-8">
    <title>04 swiper 组件</title>
    <link rel="stylesheet" href="lib/swiper-bundle.min.css">

    <style>
        .swiper-container {
            width: 600px;
            height: 300px;
            overflow: hidden;
        }
    </style>
    <script src="lib/axios.js"></script>
    <script src="lib/swiper-bundle.min.js"></script>
    <script src="lib/vue.js"></script>
</head>
<body>
<div id="app">
    <my-swiper></my-swiper>
</div>
</body>

<template id="swiper">
    <div class="swiper-container">
        <div class="swiper-wrapper">
            <div class="swiper-slide" v-for="item of bannerList" :key="item.bannerid">
                <img :src="item.img" alt="">
            </div>
        </div>
        <!-- 如果需要分页器 -->
        <div class="swiper-pagination"></div>

        <!-- 如果需要导航按钮 -->
        <div class="swiper-button-prev"></div>
        <div class="swiper-button-next"></div>

        <!-- 如果需要滚动条 -->
        <div class="swiper-scrollbar"></div>
    </div>
</template>

<script>
    new Vue({
        components: {
            MySwiper: {
                template: `#swiper`,
                data() {
                    return {
                        bannerList: []
                    }
                },
                mounted() {
                    const res = axios.get("http://121.89.205.189/api/banner/list");
                    res.then(res => {
                        console.log(res.data.data);
                        this.bannerList = res.data.data;
                    })
                },
                updated() {
                    var mySwiper = new Swiper('.swiper-container', {
                        loop: true, // 循环模式选项

                        // 如果需要分页器
                        pagination: {
                            el: '.swiper-pagination',
                        },

                        // 如果需要前进后退按钮
                        navigation: {
                            nextEl: '.swiper-button-next',
                            prevEl: '.swiper-button-prev',
                        },

                        // 如果需要滚动条
                        scrollbar: {
                            el: '.swiper-scrollbar',
                        }
                    })
                }
            }
        }
    }).$mount("#app");
</script>
</html>